<template>
  <view class="container">
    <button type="primary" @click="downloadImage">下载网络图片</button>
    <view v-if="progress > 0 && progress < 100">
      下载进度：{{ progress }}%
    </view>
    <image 
      v-if="imageUrl" 
      :src="imageUrl" 
      mode="widthFix" 
      style="margin-top: 80rpx; margin-left: 34rpx; max-width: 100%;"
    ></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '',
      progress: 0
    }
  },
  methods: {
    downloadImage() {
      const imgUrl = 'https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg';
      this.progress = 0;
      uni.downloadFile({
        url: imgUrl,
        success: (res) => {
          if (res.statusCode === 200) {
            this.imageUrl = res.tempFilePath; 
            uni.showToast({ title: '下载完成', icon: 'success' });
          }
        },
        fail: () => {
          uni.showToast({ title: '下载失败', icon: 'none' });
        },
        progress: (res) => {
          this.progress = res.progress;
        }
      });
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
}
</style>